<template>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    <el-breadcrumb-item>公告</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="swiper-card">
       <div class="swiper">
      <div class="swiper_box">
        <ul class="swiper_list" :class="{swiper_top:animate}">
          <li v-for="(item,index) in swiperList" :key="index">{{item}}</li>
        </ul>
      </div>
      </div>
      </el-card>
      </div>
</template>

<script>
  export default {
    //初始化函数

    data() {
      return{
      animate: false,
      swiperList:[],
      }
    },
    created() {
      setInterval(this.showSwiper, 2000);
      this.getTitle()
    },
    methods: {
      showSwiper () {
            this.animate = true;
            setTimeout(() => {
              this.swiperList.push(this.swiperList[0]);
              this.swiperList.shift();
              this.animate = false;
            }, 1000);
          },
          async getTitle(){
           const{data:result}=await this.$http.get("/notice/vip/getTitle")
           this.swiperList=result.data
          }
    }
    }
</script>

<style lang="less" scoped>

  .box-card{
    margin-top: 20px;
  }

  .swiper-card{
    height: 200px;
    width: 100%;
  }
   .swiper {

     margin: 0px;
     width: 100%;
     //align-items: center;
     color: #3a3a3a;
     background-color: white;
     display: flex;
     box-sizing: border-box;
    //overflow: hidden;
     font-size: 14px;
     font-weight: bold;
   }
  .swiper_box {

   display: block;
    position: relative;
    width: 100%;
    height: 500px;
     // overflow: hidden;
  }
  .swiper_list {
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    height: 50px;
  }
  .swiper_top {
    //transition: all 0.5s;
    margin-top:  0px;
  }
  .swiper_list li {
    height: 500px;
    line-height: 30px;
    font-size: 14px;
    color: #ca010b;
  }
  .swiper_list li span {
    padding: 0px;
  }



</style>
